<template>
  <div class="showInfoStyle">
    <div class="showInfoHeadStyle">
      <el-text type="primary">个人信息</el-text>
    </div>
    <div class="showInfoContainStyle">
      <div class="showInfoContainLineStyle">
        <el-text>学生id</el-text>
        <el-input
          v-model="studentInfoId"
          style="width: 240px"
          disabled
          placeholder="Please input"
        />
      </div>

      <div class="showInfoContainLineStyle">
        <el-text>学生账号</el-text>
        <el-input v-model="studentInfoAccount" style="width: 240px" disabled />
      </div>

      <div class="showInfoContainLineStyle">
        <el-text>学生姓名</el-text>
        <el-input v-model="studentInfoName" style="width: 240px"  />
      </div>

      <div class="showInfoContainLineStyle">
        <el-text>学生学号</el-text>
        <el-input v-model="studentInfoXueHao" style="width: 240px" disabled />
      </div>

      <div class="showInfoContainLineStyle">
        <el-text>学生密码</el-text>
        <el-input v-model="studentInfoPassword" style="width: 240px"  />
      </div>
    </div>
    <el-button type="primary" plain @click="sendAlterInfo">修改</el-button>
  </div>
</template>
  
  <script setup>
import { ElText } from "element-plus";
import { ref } from "vue";
import { studentStateStore } from "../store/StudentInfo.js";
import requests from "../axois/axios.js";
import { ElMessage } from "element-plus";

import { onMounted, onUnmounted, onUpdated } from "vue";

let studentStoreInfo = studentStateStore();

//定义数据
let studentInfoId = ref("");
let studentInfoAccount = ref("");
let studentInfoName = ref("");
let studentInfoXueHao = ref("");
let studentInfoPassword = ref("");

//数据绑定到页面上
//发送请求到后端
async function sendMessage() {
  let { data } = await requests.post("/student/base/querybyid", {
    studentId: studentStoreInfo.getterStudentId,
  });
  if (data.code == 200) {
    //成功
    ElMessage({
      message: "查询成功",
      type: "success",
    });
    //数据渲染到模板上

    studentInfoId.value=data.data.studentId
    studentInfoAccount.value=data.data.studentAccount
    studentInfoName.value=data.data.studentName
    studentInfoXueHao.value=data.data.studentXueHao
    studentInfoPassword.value=data.data.studentPassword
  } else {
    ElMessage({
      message: "查询失败",
      type: "error",
    });
  }
}
//发送修改请求到后端
async function sendAlterInfo(){
  let {data} = await requests.post(
    "/student/base/update",
    {
      studentId:studentInfoId.value,
      studentName:studentInfoName.value,
      studentAccount:studentInfoAccount.value,
      studentXueHao:studentInfoXueHao.value,
      studentPassword:studentInfoPassword.value,

    }
  )

  if(data.code==200){
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  }else{
    ElMessage({
      message: "修改失败",
      type: "error",
    });
  }
}

//生命周期函数
onMounted(() => {
  sendMessage();
});
</script>
  
  <style>
.showInfoStyle {
  width: 800px;
  height: 600px;
  background: #bac5cf;
  border: 1px solid;
  border-radius: 3%;
}
.showInfoHeadStyle {
  width: 600px;
  height: 50px;
  background: #8b97aa;
  border: 1px solid;
  border-radius: 12px;
}
.showInfoContainStyle {
  width: 600px;
  height: 500px;
  background: #474e58;
}
.showInfoContainLineStyle {
  width: 450px;
  height: 80px;
  background: #fcfdf6;
}
</style>